<template>
  <el-drawer
    :wrapper-closable="false"
    :title="id == 0 ? '新增' : '编辑'"
    :size="500"
    :visible.sync="innerValue"
    @open="onDrawerOpen"
    @closed="onDrawerClosed"
  >
    <div class="relative flex h-full flex-col space-y-[24px] pb-[68px] pl-[16px] pr-[4px]">
      <div class="flex min-h-0 flex-1 flex-col space-y-[24px] overflow-y-auto">
        <div>
          <div class="common-secondary-bg">
            <div class="common-secondary-title"></div>
            用户基本信息
          </div>
          <el-form
            ref="form"
            class="h-full overflow-y-auto pt-[28px]"
            :model="detail"
            :rules="fromRules"
            label-suffix="："
            size="small"
            status-icon
            label-width="80px"
            label-position="right"
          >
            <div class="flex w-full justify-between">
              <div class="w-full">
                <el-form-item label="用户账号" :prop="PROPS.userAccount">
                  <el-input
                    v-model.trim="detail[PROPS.userAccount]"
                    placeholder="用户账号"
                    clearable
                    :disabled="id != 0"
                  />
                </el-form-item>
              </div>
            </div>
            <div class="flex w-full justify-between">
              <div class="w-full">
                <el-form-item label="用户姓名" :prop="PROPS.userName">
                  <el-input v-model.trim="detail[PROPS.userName]" clearable placeholder="用户姓名" />
                </el-form-item>
              </div>
            </div>
            <div class="flex w-full justify-between">
              <div class="w-full">
                <el-form-item label="所属部门" :prop="PROPS.departId">
                  <DepartmentTree v-model="detail[PROPS.departId]" />
                </el-form-item>
              </div>
            </div>
            <div class="flex justify-between">
              <el-form-item label="性别">
                <el-radio-group v-model="detail[PROPS.gender]">
                  <el-radio
                    v-for="(item, index) in $store.state.data.OPTION_MAP[OPTION_KEYS.gender]"
                    :key="index"
                    :label="item.value"
                  >
                    {{ item.label }}
                  </el-radio>
                </el-radio-group>
              </el-form-item>
            </div>
            <div class="flex w-full justify-between">
              <div class="w-full">
                <el-form-item label="手机号" :prop="PROPS.phoneNumber">
                  <el-input v-model.trim="detail[PROPS.phoneNumber]" clearable placeholder="手机号" />
                </el-form-item>
              </div>
            </div>
            <div class="flex w-full justify-between">
              <div class="w-full">
                <el-form-item label="职务" :prop="PROPS.title">
                  <el-input v-model.trim="detail[PROPS.title]" clearable placeholder="职务" />
                </el-form-item>
              </div>
            </div>
          </el-form>
        </div>
      </div>
      <footer class="common-drawer-footer">
        <t-button class="common-search-btn" type="primary" @click="onSubmit">提 交</t-button>
        <t-button class="common-search-btn" type="default" plain @click="innerValue = false">关 闭</t-button>
      </footer>
    </div>
  </el-drawer>
</template>

<script>
import config from "../config";
import vModelMixin from "@/mixin/v-model";
import { systemUserDetail } from "@/api/user";
import DepartmentTree from "@/components/DepartmentTree";

export default {
  name: "DetailDrawer",
  components: {
    DepartmentTree,
  },
  mixins: [vModelMixin],
  props: {
    id: {
      type: [String, Number],
      required: true,
    },
    // 部门id
    departId: {
      type: [String, Number],
      default: "",
    },
  },
  data() {
    return {
      detail: {
        departId: "",
      },
      ...config,
      fromRules: {
        username: [{ required: true, message: "请输入用户账号", trigger: "blur" }],
        realName: [{ required: true, message: "请输入用户姓名", trigger: "blur" }],
        departId: [{ required: true, message: "请选择所属部门", trigger: "change" }],
      },
    };
  },
  computed: {},
  methods: {
    onDrawerOpen() {
      this.initDraw();
      if (this.id) {
        systemUserDetail({ id: this.id }).then((value) => {
          this.detail = { ...value };
        });
      }
      this.$nextTick(() => this.$refs["form"].clearValidate());
    },
    onSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.$emit("onSubmit", this.detail);
        } else {
          return false;
        }
      });
    },
    initDraw() {
      Object.keys(this.detail).forEach((item) => {
        this.$set(this.detail, item, "");
      });
      this.$set(this.detail, this.PROPS.gender, "0");
      this.detail.departId = this.departId;
    },
    onDrawerClosed() {},
  },
};
</script>

<style lang="scss" scoped></style>
